<template>
  <div class="page-wrap">
    <el-card shadow="never">
      <div class="toolbar">
        <el-input v-model="filters.search" placeholder="搜索姓名/手机号" clearable class="w-260" />
        <el-button type="primary" @click="openRecharge">充值</el-button>
      </div>

      <el-table :data="historyList" border stripe>
        <el-table-column prop="name" label="会员" width="140" />
        <el-table-column prop="phone" label="手机号" width="140" />
        <el-table-column prop="amount" label="金额" width="100" />
        <el-table-column prop="operator" label="操作人" width="120" />
        <el-table-column prop="date" label="时间" width="180">
          <template #default="{ row }">{{ formatDate(row.date) }}</template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="visible" title="储值充值" width="520px">
      <el-form :model="form" label-width="90px">
        <el-form-item label="会员">
          <el-select v-model="form.memberId" filterable placeholder="选择会员" class="w-320">
            <el-option v-for="m in memberOptions" :key="m.id" :label="`${m.name}（${m.phone}）`" :value="m.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input-number v-model="form.amount" :min="0" :precision="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, ref, onMounted } from 'vue'
import { useMemberStore } from '@/stores/member.js'

const store = useMemberStore()
const filters = reactive({ search: '' })
const visible = ref(false)
const form = reactive({ memberId: '', amount: 0 })

onMounted(() => { if (!store.members.length) store.initializeMembers() })

const memberOptions = computed(() => store.members)
const historyList = computed(() => {
  const s = (filters.search || '').toLowerCase()
  return store.rechargeHistory.filter(r => {
    if (!s) return true
    return (r.name || '').toLowerCase().includes(s) || (r.phone || '').includes(filters.search)
  })
})

function openRecharge(){
  form.memberId = ''
  form.amount = 0
  visible.value = true
}
function onSubmit(){
  if (!form.memberId) return
  store.rechargeBalance(form.memberId, form.amount)
  visible.value = false
}
function formatDate(iso){ if (!iso) return '-'; const d=new Date(iso); return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.toTimeString().slice(0,8)}` }
</script>

<style scoped>
.page-wrap { padding: 16px; }
.toolbar { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; }
.w-260 { width: 260px; }
.w-320 { width: 320px; }
</style>


